<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>收件扫描</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/oksub.css}">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body>
<div class="ok-body">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form" lay-filter="searchForm">
        </form>
    </blockquote>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "layer",
        "okUtils", "okMock"], function () {
        var table = layui.table;
        var form = layui.form;
        layer = layui.layer;
        var laydate = layui.laydate;
        var okLayer = layui.okLayer;
        var okUtils = layui.okUtils;
        var okMock = layui.okMock;
        var $ = layui.jquery;

        laydate.render({
            elem: "#startTime",
            type: "datetime"
        });
        laydate.render({
            elem: "#endTime",
            type: "datetime"
        });
        okLoading.close($);
        var userTable = table.render({
            elem: '#tableId',
            url: "/api/scan/receiveScan",
            limit: 20,
            page: true,
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[{
                type: "checkbox",
                fixed: "left"
            }, {
                field: "id",
                title: "扫描编号",
                width: 100,
                sort: true
            }, {
                field: "waybillNumber",
                title: "运单编号",
                width: 100
            }, {
                field: "expressTypeName",
                title: "快件类型",
                width: 120
            }, {
                field: "itemTypeName",
                title: "物品类型",
                width: 150
            }, {
                field: "senderClient",
                title: "寄件人",
                width: 150
            }, {
                field: "receiver",
                title: "收件人",
                width: 100
            }, {
                field: "transportMethodName",
                title: "运输方式",
                width: 100
            }, {
                field: "paymentMethodName",
                title: "付款方式",
                width: 100
            }, {
                field: "sendNetworkName",
                title: "寄件网点",
                width: 100
            }, {
                field: "weight",
                title: "重量",
                width: 100
            }, {
                field: "takerName",
                title: "取件员",
                width: 100
            }, {
                field: "destinationName",
                title: "目的地",
                width: 100
            }, {
                field: "pouchId",
                title: "袋号",
                width: 100
            }, {
                field: "scanNetworkName",
                title: "目的网点",
                width: 100
            },
                {
                    title: "操作",
                    width: 250,
                    align: "center",
                    fixed: "right",
                    templet: "#operationTpl"
                }]],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        table.on("tool(tableFilter)", function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "receiveScan":
                    scan(data.id);
                    break;
            }
        });

        function scan(id) {
            $.get("/api/scan/receiveScanOp", {
                id: id
            }, function (data) {
                if (data.code == 0) {
                    layer.msg("扫描成功", {"icon": 1});
                    userTable.reload(); //刷新表格数据（也即让table重新加载url）
                    layer.close(index);//关闭弹出框
                } else {
                    layer.close(index);//关闭弹出框
                    layer.msg(data.msg, {
                        icon: 2
                    });
                }
            })
        }


    })
</script>


<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="到件扫描" lay-event="receiveScan"><i class="layui-icon">&#xe642;</i></a>
</script>


</body>
</html>
